<template>
  <view class="commonContainer">
    <view class="titleTop">
      <view class="text"> 1RM-估算 </view>
      <image class="line" src="../static/line2.png" mode="widthFix"></image>
    </view>
    <view class="inputBox" v-if="step == 1">
      <view class="col">
        <view class="lable"> 请输入曾做过的最大/较大重量 </view>
        <view class="value">
          <input
            type="number"
            :value="maxWeight"
            data-name="maxWeight"
            @input="inputChange"
            maxlength="3"
          />
          KG
        </view>
      </view>
      <view class="col" style="margin-top: 100rpx">
        <view class="lable"> 请输入该重量下一组最多完成次数 </view>
        <view class="value">
          <picker
            mode="selector"
            :range="rangeArray"
            :value="selectIndex"
            @change="bindPickerChange"
          >
            <view class="box">
              <view class="pickerSelectRow">{{ rangeArray[selectIndex] }}</view>
              <view class="text"> 个 </view>
            </view>
          </picker>
        </view>
      </view>
    </view>
    <view class="inputBox" v-else-if="step == 2">
      <view class="col">
        <view class="lable"> 您的估算1RM为: </view>
        <view class="numBox">
          <view class="num">
            {{ expectedRm }}
          </view>
          <view class="text"> KG </view>
        </view>
      </view>
    </view>
    <view class="btnBox" @click="handleStep">
      {{ step == 1 ? "确定" : "返回" }}
    </view>
    <!-- 		<view class="inputBox">
			<view class="text">
				您的估算1RM为：{{expectedRm ? expectedRm : '______________'}}KG
			</view>
		</view> -->
    <!-- <view class="tip">
			注意：本模式为粗略估算，如需准确1RM指导训练，请选择大众适用模式或最精准模式，通过重量和动作速度为您测算。
		</view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      step: 1, //当前的页面层级 1-输入页面 2-结果页面
      selectIndex: 0,
      rangeArray: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15],
      maxWeight: "", //预计最大重量
      maxNum: 1, //预计次数
      // expectedRm: 0, //预计RM
    };
  },
  onLoad(option) {},
  mounted() {},
  computed: {
    expectedRm() {
      let result = 0;
      if (this.maxNum == 1) {
        result = this.maxWeight;
      } else if (this.maxNum == 2) {
        result = this.maxWeight / 0.95;
      } else if (this.maxNum == 3) {
        result = this.maxWeight / 0.93;
      } else if (this.maxNum == 4) {
        result = this.maxWeight / 0.9;
      } else if (this.maxNum == 5) {
        result = this.maxWeight / 0.87;
      } else if (this.maxNum == 6) {
        result = this.maxWeight / 0.85;
      } else if (this.maxNum == 7) {
        result = this.maxWeight / 0.83;
      } else if (this.maxNum == 8) {
        result = this.maxWeight / 0.8;
      } else if (this.maxNum == 9) {
        result = this.maxWeight / 0.77;
      } else if (this.maxNum == 10) {
        result = this.maxWeight / 0.75;
      } else if (this.maxNum == 11) {
        result = this.maxWeight / 0.7;
      } else if (this.maxNum == 12) {
        result = this.maxWeight / 0.67;
      } else if (this.maxNum == 15) {
        result = this.maxWeight / 0.65;
      }
      console.log(result);
      if (result != "") {
        result = Number(result).toFixed(2);
      }
      return result;
    },
  },
  methods: {
    // 选择器
    bindPickerChange: function (e) {
      this.selectIndex = e.detail.value;
      this.maxNum = this.rangeArray[this.selectIndex];
    },
    inputChange(e) {
      this[e.currentTarget.dataset.name] = e.detail.value;
    },
    // 确定
    handleStep() {
      if (this.step == 1) {
        if (!this.maxWeight) {
          uni.showToast({
            title: "请先输入重量",
            icon: "none",
          });
          return false;
        } else {
          this.step = 2;
        }
      } else if (this.step == 2) {
        this.step = 1;
      }
    },
  },
};
</script>
<style>
page {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

// 去掉页面滚动条
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>
<style lang="less" scoped>
.commonContainer {
  height: 100%;
  width: 100%;
  font-family: PingFangSC-Semibold, PingFang SC;
  padding: 30rpx;
  box-sizing: border-box;
  overflow-y: scroll !important;
  background: #f2f2f3;
  color: #333;
  padding-bottom: 50rpx;
  box-sizing: border-box;
  position: relative;

  .titleTop {
    font-family: "优设标题黑";

    .text {
      font-size: 20px;
      background-image: linear-gradient(to right, #6e58aa, #f17071);
      -webkit-background-clip: text;
      color: transparent;
      width: fit-content;
      margin-bottom: -10px;
    }

    .line {
      width: 40px;
      // height: 6px;
    }
  }

  .inputBox {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    padding: 20rpx;
    font-family: "优设标题黑";
    width: 100%;

    .col {
      color: #6e58aa;

      .lable {
        text-align: center;
        font-size: 20px;
      }

      .value {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-top: 32px;

        .box {
          display: flex;
          align-items: center;

          .pickerSelectRow {
            width: 150px;
            height: 32px;
            border-radius: 2px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 4px rgba(110, 88, 170, 0.2);
            padding: 2px;
          }

          .text {
            margin-left: 10px;
          }
        }

        input {
          width: 150px;
          height: 32px;
          border-radius: 2px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 2px 4px rgba(110, 88, 170, 0.2);
          padding: 2px;
          margin-right: 10px;
        }
      }

      .numBox {
        display: flex;
        align-items: flex-end;
        justify-content: center;

        .num {
          height: fit-content;
          font-size: 60px;
          background-image: linear-gradient(to right, #7948ea, #f17071);
          -webkit-background-clip: text;
          color: transparent;
          width: fit-content;
        }

        .text {
          font-size: 20px;
          margin-bottom: 5%;
        }
      }
    }
  }

  .btnBox {
    width: 40%;
    border-radius: 15px;
    height: 35px;
    font-size: 24px;
    color: #fff;
    line-height: 35px;
    text-align: center;
    // background: linear-gradient(180deg, #9f68d3 0%, #bf88c5 100%);
    background-color: #6e58aa;
    text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.25);
    position: fixed;
    bottom: 7%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .tip {
    color: rgba(227, 60, 100, 1);
    margin-top: 150rpx;
  }
}
</style>
